<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录名" prop="username">
            <el-input v-model="form.username" disabled />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="form.realname" />
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="form.phonenumber" maxlength="20" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="form.email" maxlength="50" />
        </el-form-item>
        <el-form-item label="住址" prop="address">
            <el-input v-model="form.address" type="textarea" />
        </el-form-item>
        <el-form-item label="身份证号" prop="id_card">
            <el-input v-model="form.id_card" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" size="mini" @click="submit">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {setToken} from '@/libs/util'
import {mapActions} from 'vuex'
export default {
    props: {
        user: {
            type: Object
        }
    },
    data() {
        return {
            form: {},
            // 表单校验
            rules: {
                username: [{required: true, message: '登录名不能为空', trigger: 'blur'}],
                realname: [{required: true, message: '真实姓名不能为空', trigger: 'blur'}],
                email: [
                    {required: true, message: '邮箱地址不能为空', trigger: 'blur'},
                    {
                        type: 'email',
                        message: '请输入正确的邮箱地址',
                        trigger: ['blur', 'change']
                    }
                ],
                phonenumber: [
                    {required: true, message: '手机号码不能为空', trigger: 'blur'},
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    }
                ],
                id_card: [{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur'}]
            }
        }
    },
    watch: {
        user: {
            handler(user) {
                if (user) {
                    this.form = user
                }
            },
            immediate: true
        }
    },
    methods: {
        ...mapActions(['handleLogOut']),
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const userInfo = this.form
                    const d = {
                        UserID: userInfo.username,
                        RealName: userInfo.realname,
                        Gender: userInfo.sex,
                        Phone: userInfo.phonenumber,
                        Email: userInfo.email,
                        Address: userInfo.address,
                        id_card: userInfo.id_card
                    }
                    const self = this
                    PopupCommon.confirm('确定修改用户【' + userInfo.username + '】?')
                        .then(() => {
                            AjaxCommon('/api/User/SaveUserInfo', 'post', d).then((res) => {
                                if (res?.data?.Code == 200) {
                                    PopupCommon.notify('success', '用户修改成功，请重新登录。')
                                    sessionStorage.setItem('ALLMENULIST', '')
                                    localStorage.removeItem('userInfo')
                                    sessionStorage.setItem('menuInfo', '')
                                    setToken('')
                                    localStorage.tagNaveList = ''
                                    setTimeout(() => {
                                        self.handleLogOut().then(() => {
                                            self.$router.replace({
                                                name: 'userLogin'
                                            })
                                        })
                                    }, 1000)
                                } else {
                                    const msg = res?.data?.Message
                                    if (msg) {
                                        PopupCommon.notify('error', msg)
                                    }
                                }
                            })
                        })
                        .catch(() => {
                            // 这里尽量写下，否则会报警告异常。
                            console.log('已取消删除')
                        })
                }
            })
        }
        // close() {
        //   this.$tab.closePage();
        // }
    }
}
</script>
